<template>
  <div style="height: auto">
    <!-- 头部搜索 -->
    <el-card style="width: 100%; margin-bottom: 10px" shadow="never">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="ordDto.regionCode"
            style="width: 120px"
            placeholder="邮编"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="ordDto.regionArea"
            style="width: 120px"
            placeholder="区域"
            clearable
          >
          </el-input>
        </el-col>

        <el-col :span="2">
          <el-input
            v-model="ordDto.regionStreet"
            style="width: 120px"
            placeholder="街道"
            clearable
          >
          </el-input>
        </el-col>

        <el-col
          style="display: flex; justify-content: flex-end; align-items: center"
          :span="2"
        >
          <el-space :size="20">
            <el-button type="primary" plain size="small" @click="handleSearch"
              >搜索</el-button
            >
            <el-button type="danger" plain size="small" @click="drawer = true"
              >添加</el-button
            >
          </el-space>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格数据展示 EEF7FD -->
    <el-card
      style="width: 100%; background: #eef7fd; float: left"
      shadow="never"
    >
      <el-table
        :data="tableData"
        border
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="序号" width="60" align="center">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="regionCode" label="邮编" align="center" />
        <el-table-column prop="regionProvince" label="省份" align="center" />
        <el-table-column prop="regionCity" label="城市" align="center" />
        <el-table-column prop="regionArea" label="区域" align="center" />
        <el-table-column prop="regionStreet" label="街道" align="center" />
        <el-table-column prop="regionPrice" label="价格/单" align="center" />
        <el-table-column prop="regionZone" label="排序" align="center" />

        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 10px; text-align: center">
        <el-pagination
          :current-page="pageNo"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :small="small"
          :disabled="disabled"
          layout="total,prev, pager, next,sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-drawer
      v-model="drawer"
      title="I'm inner Drawer"
      :append-to-body="true"
      :before-close="handleClose"
      size="50%"
    >
      <el-form label-position="left" :model="froms">
        <el-form-item label="用户名" :label-width="60">
          <el-input v-model="froms.id" autocomplete="off" />
        </el-form-item>

        <el-form-item label="Activity zone">
          <el-select v-model="froms.regionProvince" placeholder="省份">
            <el-option label="四川省" value="四川省" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select v-model="froms.regionCity" placeholder="城市">
            <el-option label="成都市" value="成都市" />
          </el-select>
        </el-form-item>

        <el-form-item label="Activity zone">
          <el-input
            v-model="froms.regionArea"
            autocomplete="off"
            placeholder="区域"
          />
        </el-form-item>

        <el-form-item label="Activity zone">
          <el-input
            v-model="froms.regionStreet"
            autocomplete="off"
            placeholder="街道"
          />
        </el-form-item>

        <el-form-item label="Activity form">
          <el-input v-model="froms.regionCode" placeholder="邮编" />
        </el-form-item>

        <el-form-item label="Activity form">
          <el-input v-model="froms.regionPrice" placeholder="价格" />
        </el-form-item>
        <el-form-item label="Activity form">
          <el-input v-model="froms.regionZone" placeholder="店铺区域" />
        </el-form-item>
      </el-form>
      <el-button
        :icon="User"
        type="pr"
        v-has="`btn:user:per:role`"
        @click="handleAddOrders"
      >
        确定
      </el-button>
    </el-drawer>
  </div>
</template>
    
  <script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElLoading } from "element-plus";
import { ElMessageBox, ElMessage } from "element-plus";
import { findPlanningList, PlanningSave } from "@/api/order";
import { User, Edit, Delete } from "@element-plus/icons-vue";
const total = ref(0);
const pageNo = ref(1);
const pageSize = ref(20);

const loading = ref(true);
const drawer = ref(false);

const tableData = ref([]);
const router = useRouter();

const ordDto = ref({
  currentPage: 0,
  pageSize: 5,
  regionCode: "",
  regionArea: "",
  regionStreet: "",
});

const froms = ref({
  regionProvince: "四川省",
  regionCity: "成都市",
  regionArea: "",
  regionStreet: "",
  regionCode: "",
  regionPrice: "30",
  regionZone: "1",
});

onMounted(() => {
  getList();
});
const handleSizeChange = () => {
  ordDto.value.pageSize = pageSize.value;
  getList();
};
const handleCurrentChange = (e) => {
  console.log(e);
  pageNo.value = e;
  ordDto.value.pageIndex = e;
  getList();
};
const getList = () => {
  findPlanningList(ordDto.value).then((res) => {
    loading.value = false;
    console.log(res);
    if (res.code === 200 && res.data !== null) {
      tableData.value = res.data.data;
    }
  });
};
const handleSearch = () => {
  getList();
};

const handleEdit = (obj) => {
  console.log(obj);
  drawer.value = true;
  froms.value = obj;
};
const handleClose = (done) => {
  ElMessageBox.confirm("Are you sure you want to close this?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
const handleAddOrders = () => {
  PlanningSave(froms.value).then((res) => {
    console.log(res);
    if (res.code === 200) {
      ElMessage.success(res.msg);
      drawer.value = false;
      froms.value = {};
      getList();
    }
  });
};
</script>
  <style scoped>
/*最外层透明*/
:deep(.el-table, .el-table__expanded-cell) {
  background-color: transparent !important;
}
/* 表格内背景颜色 */
:deep(.el-table th, .el-table tr, .el-table td) {
  background-color: transparent !important;
  border: 0;
  color: #135294;
}
/*去除底边框*/
:deep.el-table td.el-table__cell {
  border: 0;
}
:deep.el-table th.el-table__cell.is-leaf {
  border: 0;
}
/*去除底部灰条.el-table::before*/
:deep .el-table::before {
  display: none;
}
.el-pagination {
  text-align: center;
  justify-content: center;
  color: #135294;
}
:deep .el-pagination__sizes,
.el-pagination__total {
  color: #135294 !important;
}
:deep .el-pagination button {
  background-color: transparent !important;
}
:deep .el-pager li {
  background-color: transparent !important;
}
:deep(.el-pagination button.is-disabled, .el-pagination button.is-disabled) {
  background-color: transparent !important;
}
:deep .el-pagination .el-select {
  width: 100px !important;
}
</style>